<template>
  <div class="monitor-log">
    <div class="chart-title">
      检测记录
    </div>
    <div class="log-list" ref="logList">
      <div class="log-items-wrapper" ref="logWrapper" :style="{ transform: `translateY(${scrollOffset}px)` }">
        <div v-for="(log, index) in displayLogs" :key="`${log.deviceName}-${log.id}-${index}`"
             class="log-item" :class="{ 'highlight-item': log.isHighlight }">
          <!-- 状态指示器 -->
          <div class="status-indicator" :class="getStatusClass(log.status || log.type)">
            <div class="status-dot"></div>
          </div>
          <!-- 设备信息 -->
          <div class="device-info">
            <div class="device-name">{{ log.deviceName }}</div>
            <div class="device-status">
              <span class="status-text" :class="getStatusClass(log.status || log.type)">
                {{ log.status || log.type }}
              </span>
              <span class="log-time">{{ formatTime(log.createTime || log.timestamp) }}</span>
            </div>
          </div>
          <!-- AI 问询按钮，仅在故障时显示 -->
          <div v-if="(log.status || log.type) === '故障'" class="ai-log-btn" @click.stop="inquiryFromLog(log)">
            <i class="el-icon-service"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MonitorLog',
  props: {
    monitorLogs: {
      type: Array,
      default: () => []
    },
    latheNamesToAnimate: {
      type: Set,
      default: () => new Set()
    }
  },
  data() {
    return {
      scrollOffset: 0,
      currentIndex: 0,
      scrollTimer: null,
      itemHeight: 70, // 每个日志项的高度
      visibleCount: 6, // 可见的日志项数量
      scrollInterval: 3000 // 滚动间隔（毫秒）
    };
  },
  computed: {
    displayLogs() {
      if (!this.monitorLogs || this.monitorLogs.length === 0) {
        return [];
      }

      // 如果日志数量少于可见数量，直接返回
      if (this.monitorLogs.length <= this.visibleCount) {
        return this.monitorLogs;
      }

      // 创建循环显示的日志列表
      const logs = [...this.monitorLogs];
      // 在末尾添加前几个项目，实现无缝循环
      const extraLogs = logs.slice(0, this.visibleCount);
      return [...logs, ...extraLogs];
    }
  },
  watch: {
    monitorLogs: {
      handler(newLogs) {
        if (newLogs && newLogs.length > 0) {
          this.startScrolling();
        } else {
          this.stopScrolling();
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.startScrolling();
  },
  beforeDestroy() {
    this.stopScrolling();
  },
  methods: {
    getStatusClass(status) {
      const statusMap = {
        '正常': 'normal',
        '故障': 'error',
        '待机': 'warning',
        '离线': 'offline'
      };
      return statusMap[status] || 'offline';
    },

    formatTime(timestamp) {
      if (!timestamp) return '';

      const date = new Date(timestamp);
      return date.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
    },

    startScrolling() {
      this.stopScrolling();

      if (!this.monitorLogs || this.monitorLogs.length <= this.visibleCount) {
        return;
      }

      this.scrollTimer = setInterval(() => {
        this.scrollToNext();
      }, this.scrollInterval);
    },

    stopScrolling() {
      if (this.scrollTimer) {
        clearInterval(this.scrollTimer);
        this.scrollTimer = null;
      }
    },

    scrollToNext() {
      if (!this.monitorLogs || this.monitorLogs.length <= this.visibleCount) {
        return;
      }

      this.currentIndex++;
      const maxIndex = this.monitorLogs.length;

      // 计算滚动偏移
      this.scrollOffset = -this.currentIndex * this.itemHeight;

      // 如果滚动到末尾，重置到开始位置
      if (this.currentIndex >= maxIndex) {
        setTimeout(() => {
          this.currentIndex = 0;
          this.scrollOffset = 0;
        }, 500); // 等待过渡动画完成
      }
    },

    inquiryFromLog(log) {
      this.$emit('inquiry-from-log', log);
    }
  }
}
</script>

<style lang="scss" scoped>
@import './mixins/cardStyles.scss';

.monitor-log {
  height: calc(50% - 12px);
  @include card-base-style;

  .chart-title {
    @include card-title-style;
  }

  .log-list {
    flex: 1;
    padding: 10px;
    overflow: hidden;
    position: relative;
    height: 420px; // 固定高度，显示6个项目

    .log-items-wrapper {
      transition: transform 0.5s ease-in-out;
      position: relative;
    }

    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 5px;
    }
    &::-webkit-scrollbar-track {
      background: rgba(255,255,255,0.02);
      border-radius: 3px;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.25);
      border-radius: 3px;
      &:hover {
        background: rgba(255,255,255,0.4);
      }
    }
    // Firefox
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) rgba(255,255,255,0.02);

    .log-item {
      display: flex;
      align-items: center;
      padding: 15px 18px;
      margin-bottom: 10px;
      background: linear-gradient(135deg, rgba(15, 35, 75, 0.9), rgba(10, 25, 60, 0.8));
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      height: 65px;
      position: relative;
      overflow: hidden;

      // 添加背景光效
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
        transition: left 0.6s ease;
      }

      &:hover {
        background: linear-gradient(135deg, rgba(20, 45, 95, 0.95), rgba(15, 35, 75, 0.9));
        transform: translateX(5px) scale(1.02);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

        &::before {
          left: 100%;
        }
      }

      &.highlight-item {
        background: linear-gradient(135deg, rgba(255, 43, 43, 0.15), rgba(255, 43, 43, 0.08));
        border-color: rgba(255, 43, 43, 0.3);
        animation: highlight-pulse 2s infinite ease-in-out;
      }

      // 状态指示器
      .status-indicator {
        width: 12px;
        height: 12px;
        margin-right: 15px;
        position: relative;

        .status-dot {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 50%;
            opacity: 0.3;
            animation: status-ripple 2s infinite;
          }
        }

        &.normal .status-dot {
          background: #4CAF50;
          box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);

          &::after {
            background: #4CAF50;
          }
        }

        &.error .status-dot {
          background: #FF5722;
          box-shadow: 0 0 10px rgba(255, 87, 34, 0.5);
          animation: error-blink 1s infinite;

          &::after {
            background: #FF5722;
          }
        }

        &.warning .status-dot {
          background: #FF9800;
          box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);

          &::after {
            background: #FF9800;
          }
        }

        &.offline .status-dot {
          background: #9E9E9E;
          box-shadow: 0 0 5px rgba(158, 158, 158, 0.3);

          &::after {
            background: #9E9E9E;
          }
        }
      }

      // 设备信息区域
      .device-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .device-name {
          color: #ffffff;
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 4px;
          letter-spacing: 0.5px;
        }

        .device-status {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .status-text {
            font-size: 13px;
            font-weight: 500;
            padding: 2px 8px;
            border-radius: 4px;

            &.normal {
              color: #4CAF50;
              background: rgba(76, 175, 80, 0.1);
            }

            &.error {
              color: #FF5722;
              background: rgba(255, 87, 34, 0.1);
            }

            &.warning {
              color: #FF9800;
              background: rgba(255, 152, 0, 0.1);
            }

            &.offline {
              color: #9E9E9E;
              background: rgba(158, 158, 158, 0.1);
            }
          }

          .log-time {
            color: #8f9bb3;
            font-size: 12px;
            font-weight: 400;
          }
        }
      }

      .ai-log-btn {
        margin-left: 15px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(255, 43, 43, 0.3), rgba(255, 43, 43, 0.2));
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ff2b2b;
        cursor: pointer;
        animation: aiPulse 1.5s infinite ease-in-out;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        border: 1px solid rgba(255, 43, 43, 0.4);

        i {
          font-size: 14px;
        }

        &:hover {
          background: linear-gradient(135deg, rgba(255, 43, 43, 0.5), rgba(255, 43, 43, 0.3));
          transform: scale(1.1);
          box-shadow: 0 4px 15px rgba(255, 43, 43, 0.3);
        }
      }
    }
  }
}

// 动画定义
@keyframes aiPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes highlight-pulse {
  0%, 100% {
    border-color: rgba(255, 43, 43, 0.3);
    box-shadow: 0 0 0 rgba(255, 43, 43, 0.3);
  }
  50% {
    border-color: rgba(255, 43, 43, 0.6);
    box-shadow: 0 0 20px rgba(255, 43, 43, 0.2);
  }
}

@keyframes status-ripple {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes error-blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0.6;
  }
}
</style>
